<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box info_box">
                <div class="list">
                    <h2 class="title bold">基本资料</h2>
                    <div class="content">
                        <v-form class="mt_24 mb_24" direction="horizontal">
                            <v-form-item class="border" label="账户昵称" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <!-- <span class="ant-form-text" v-show="userDATA.userName">{{ userDATA.uname }}</span> -->
                                <v-input class="input" placeholder="请输入账户昵称" :value="userDATA.userName"></v-input>
                            </v-form-item>
                            <v-form-item class="border" label="真实姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <template v-if="!userDATA.userName">
                                    <span class="ant-form-text text_not">
                                        您尚未认证，请立即前往认证
                                        <i class="iconfont va_m">&#xe7ac;</i>
                                    </span>
                                    <span class="btn_status" @click="jumpAuthentication()">去认证</span>
                                </template>
                                <span class="ant-form-text" v-show="userDATA.userName" v-else>{{ userDATA.userName }}</span>
                            </v-form-item>
                            <v-form-item class="border" label="注册时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                                 <span class="ant-form-text text_not">{{ userDATA.createTime }}</span>
                            </v-form-item>
                        </v-form>
                    </div>
                </div>
                <div class="list">
                    <h2 class="title bold">账户安全</h2>
                    <div class="content">
                        <v-form class="mt_24 mb_24" direction="horizontal">
                            <v-form-item class="border" label="手机号码" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <span class="ant-form-text">+ 86   {{ userDATA.mobilePhone || '暂未绑定' }}</span>
                                <span class="btn_status" @click="jumpForgot(4)">修改</span>
                            </v-form-item>
                            <v-form-item class="border" label="绑定邮箱" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <span class="ant-form-text text_not">{{ userDATA.email || '暂未绑定' }}</span>
                                <span class="btn_status" @click="jumpForgot(3)">{{ userDATA.email ? '修改' : '绑定' }}</span>
                            </v-form-item>
                            <v-form-item class="border" label="登录密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <span class="ant-form-text">*************</span>
                                <span class="btn_status" @click="jumpForgot(1)">修改</span>
                            </v-form-item>
                            <v-form-item class="border" label="交易密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <span class="ant-form-text">*************</span>
                                <span class="btn_status" @click="jumpForgot(2)">修改</span>
                            </v-form-item>
                            <v-form-item class="border" label="收货地址" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <span class="ant-form-text text_not">暂未设置</span>
                                <span class="btn_status">去设置</span>
                            </v-form-item>
                        </v-form>
                    </div>
                </div>
            </div>
            <div class="case_box tips_box">
                <h4 class="title">温馨提示</h4>
                <p class="text">* 实名认证信息审核通过后即永久有效， 不可修改，一个证件仅可绑定一个账户； </p>
                <p class="text">* 为保障您的资产安全和权益，请您使用真实证件资料尽快通过实名认证；</p>
                <p class="text">* 通过实名认证后，您方可获得修改手机号码、交易密码、邮箱及收货地址等资料的权利； </p>
                <p class="text">* 不得盗用或假冒他人身份信息注册，一经发现平台立即作冻结账户处理。</p>
            </div>
            <div class="case_box logs_box">
                <div class="cl">
                    <h2 class="f_l bold">登录记录</h2>
                    <span class="f_r tips">如有异常，可能是您的密码已泄露，请您及时修改登录密码</span>
                </div>
                <div class="content mt_30">
                    <v-data-table :data='getData' :columns='columns' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div v-if="props.column.field === 'field_5'">
                                <span style="color: #EEAF00;" v-if="props.item.field_5 === '异常'">{{ props.item.field_5 }}</span>
                                <span class="" v-else>{{ props.item.field_5 }}</span>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <!-- <div class="table_more_btn text_c">
                        <span>查看更多<i class="iconfont ml_10">&#xe61f;</i></span>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BasicInfo",
        data: function() {
            return {
                dataForm: {
                    name: '',
                    password: '',
                    mobilePhone: '',
                    mail: ''
                },
                columns:[
                    { title:"时间", field:'field_1', width: '20%' },
                    { title:"登录地区", field:'field_2', width: '20%' },
                    { title:"登录IP", field:'field_3', width: '20%' },
                    { title:"登录方式", field:'field_4', width: '20%' },
                    { title:"状态", field:'field_5', width: '20%' },
                ],
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 16
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                userDATA.createTime = $.$getFormatMD(userDATA.createTime, true);
                return userDATA;
            }
        },
        methods: {
            getData: function() {
                return new Promise(function(resolve) {
                    resolve({
                        "result":[
                            // {
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "中国 广东 深圳市",
                            //     "field_3": "119.123.12.120",
                            //     "field_4": "PC",
                            //     "field_5": "成功",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "中国 广东 深圳市",
                            //     "field_3": "119.123.12.120",
                            //     "field_4": "PC",
                            //     "field_5": "成功",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "中国 广东 深圳市",
                            //     "field_3": "119.123.12.120",
                            //     "field_4": "PC",
                            //     "field_5": "异常",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "中国 广东 深圳市",
                            //     "field_3": "119.123.12.120",
                            //     "field_4": "PC",
                            //     "field_5": "异常",
                            // }
                        ],
                    });
                });
            },
            // 忘记密码
            jumpForgot: function(type) {
                this.$router.push({ path: '/login_register/forgot', query: { type }});
            },
            // 跳转认证
            jumpAuthentication: function() {
                this.$store.commit({
                    type: 'togglePersonalMenuKEY',
                    data: { src: 'Authentication' }
                });
            }
        },
        mounted: function() {
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            margin-bottom: 20px;
            padding: 25px 30px;
            background-color: white;
        }
        .info_box{
            .content{
                /deep/ label{
                    font-size: 13px;
                    vertical-align: text-bottom;
                }
                /deep/ .ant-form-item{
                    padding: 0;
                    margin-bottom: 0;
                    font-size: 13px;
                    color: #333;
                    // &.border{
                    //     border-bottom: 1px solid #efeff4;
                    // }
                }
                /deep/ .ant-form-item-label{
                    width: 22%;
                    padding-right: 50px;
                    text-align: left;
                }
                .input{
                    width: 180px;
                    height: 26px;
                }
                .text_not{
                    color: #CCC;
                    .iconfont{
                        font-size: 13px;
                    }
                }
                .btn_status{
                    float: right;
                    color: @theme_color;
                    cursor: pointer;
                    .completed{
                        color: #CCC;
                    }
                }
            }
        }
        .tips_box{
            .title{
                font-size: 13px;
                margin-bottom: 10px;
            }
            .text{
                font-size: 10px;
                line-height: 20px;
                color: #999;
            }
        }
        .logs_box{
            .tips{
                margin-top: 8px;
                font-size: 10px;
                color: #CCC;
            }
            .content{
                font-size: 16px;
                margin-bottom: 10px;
                /deep/ .ant-table-tbody>tr>td, /deep/ .ant-table-thead>tr>th{
                    text-align: center;
                    font-size: 13px;
                }
            }
        }
    }
</style>
